<script setup lang="ts">
import {useUserMessageContent} from "../hooks/useUserMessageContent.ts";
import {Setting} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import {TabsPaneContext} from "element-plus";
import {useRouter} from "vue-router";

const {page} = defineProps<{
  page: number
}>()
const activeName = ref('0')

onMounted(() => {
  activeName.value = page.toString()
})
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
const router = useRouter()
const {img} = useUserMessageContent()
</script>

<template>
  <div class="message-content-box">
    <div class="message-content-header">
      <el-text class="message-header-text">消息中心</el-text>
      <div class="message-header-right-btn">
        <div class="right-button-box">
          <el-button class="right-button" @click="router.push('Setting')" :icon="Setting" link>消息设置</el-button>
        </div>
      </div>
    </div>
    <div class="message-content-body">
      <el-tabs v-model="activeName" class="demo-tabs label-font-size" @tab-click="handleClick">
        <el-tab-pane name="0">
          <template #label>
             <span class="custom-tabs-label">
                <span class="span-font-size">评论和@</span>
            </span>
          </template>
          <div class="null-img-flex">
            <el-image :src="img"/>
          </div>

        </el-tab-pane>
        <el-tab-pane name="1">
          <template #label>
             <span class="custom-tabs-label">
                <span class="span-font-size">新增粉丝</span>
            </span>
          </template>
          <div class="null-img-flex">
            <el-image :src="img"/>
          </div>
        </el-tab-pane>
        <el-tab-pane name="2">
          <template #label>
             <span class="custom-tabs-label">
                <span class="span-font-size">赞和收藏</span>
            </span>
          </template>
          <div class="null-img-flex">
            <el-image :src="img"/>
          </div>
        </el-tab-pane>
        <el-tab-pane name="3">
          <template #label>
             <span class="custom-tabs-label">
                <span class="span-font-size">私信</span>
            </span>
          </template>
          <div class="null-img-flex">
            <el-image :src="img"/>
          </div>
        </el-tab-pane>
        <el-tab-pane name="4">
          <template #label>
             <span class="custom-tabs-label">
                <span class="span-font-size">系统通知</span>
            </span>
          </template>
          <div class="null-img-flex">
            <el-image :src="img"/>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import "style/UserMessageContent";
</style>